<template>
    <!-- 入口组件 -->
    <section
        :style="{
            paddingTop: itemConfig.paddingTop + 'px',
            paddingBottom: itemConfig.paddingBottom + 'px',
            marginTop: itemConfig.marginTop + 'px',
            marginBottom: itemConfig.marginBottom + 'px',
            background: `linear-gradient(
                ${itemConfig.bgEdg}deg,
                ${itemConfig.bgColorOne},
                ${itemConfig.bgColorTow},
                ${itemConfig.bgColorThree})`
        }"
    >
        <div class="max-w-[1200px] m-auto px-5 flex justify-between items-center gap-10">
            <div class="flex-1 shrink-0 overflow-hidden">
                <h2 class="text-center font-bold line-clamp-1 mb-7 h-[60px]">
                    <typing
                        :color="itemConfig.titleColor"
                        :text-tips="itemConfig.title"
                        font-size="60px"
                        cursor-height="46px"
                    />
                </h2>

                <p
                    class="text-center text-xl leading-8"
                    :style="{ color: itemConfig.introColor }"
                >
                    {{ itemConfig.intro }}
                </p>

                <div
                    class="mt-14 text-center flex  gap-4"
                    :class="{ 'justify-center': !itemConfig.image }"
                >
                    <template v-for="(item, index) in (itemData as itemDataType[])">
                        <div
                            v-if="item.isEnable"
                            :key="index"
                            class="button"
                            :style="{
                                color: item.textColor,
                                borderColor: item.borderColor,
                                background: `linear-gradient(
                                    ${item.bgEdg}deg,
                                    ${item.bgColorOne},
                                    ${item.bgColorTow},
                                    ${item.bgColorThree})`
                            }"
                            @click="handleJump(item)"
                        >
                            {{ item.name }}
                        </div>
                    </template>
                </div>
            </div>

            <div v-if="itemConfig.image">
                <el-image
                    :src="appStore.toAbsoluteUrl(itemConfig.image)"
                    :alt="itemConfig.title"
                    :lazy="true"
                    class="w-[500px]"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { popupEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'
import validateUtil from '~/utils/validate'

interface itemConfigType {
    title: string;
    intro: string;
    image: string;
    paddingTop: number;
    paddingBottom: number;
    marginTop: number;
    marginBottom: number;
    bgEdg: number;
    bgColorOne: string;
    bgColorTow: string;
    bgColorThree: string;
    titleColor: string;
    introColor: string;
}

interface itemDataType {
    name: string;
    bgEdg: number;
    bgColorOne: string;
    bgColorTow: string;
    bgColorThree: string;
    borderColor: string;
    textColor: string;
    isLogin: boolean;
    isEnable: boolean;
    link: any;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()

const handleJump = (item: itemDataType) => {
    if (!userStore.isLogin && item.isLogin) {
        return appStore.setPopup(popupEnum.LOGIN)
    }

    if (item.link?.path) {
        if (validateUtil.isExternal(item.link?.path)) {
            window.open(item.link?.path, '_blank')
        } else {
            router.push({
                path: item.link?.path,
                query: item.link?.query
            })
        }
    }
}
</script>

<style scoped lang="scss">
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 60px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    transition: all 0.2s;
    &:hover {
        opacity: .9;
        transform: scale(1.025);
    }
}
</style>
